<!DOCTYPE html>
<html>
<head>
    <title>Physics Motion Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="850" height="650"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, headLength = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headLength * Math.cos(angle - Math.PI / 6), toy - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headLength * Math.cos(angle + Math.PI / 6), toy - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // --- Shared Drawing Parameters ---
        const p0 = { x: 80, y: 250 };   // Point A
        const p1 = { x: 350, y: 250 };  // Control point for the curve
        const p2 = { x: 350, y: 100 };  // Point B
        
        // Calculate point C on the curve (e.g., at t=0.3)
        const t = 0.3;
        const Cx = (1 - t) ** 2 * p0.x + 2 * (1 - t) * t * p1.x + t ** 2 * p2.x;
        const Cy = (1 - t) ** 2 * p0.y + 2 * (1 - t) * t * p1.y + t ** 2 * p2.y;
        const C = { x: Cx, y: Cy }; // C is approx (217.7, 236.5)

        function drawBaseDiagram(panelLabel) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.font = 'italic 28px serif';

            // Draw the curved path
            ctx.beginPath();
            ctx.moveTo(p0.x, p0.y);
            ctx.quadraticCurveTo(p1.x, p1.y, p2.x, p2.y);
            ctx.stroke();

            // Draw labels for the path
            ctx.fillText('A', p0.x - 25, p0.y + 5);
            ctx.fillText('B', p2.x + 10, p2.y);

            // Draw point C
            ctx.beginPath();
            ctx.arc(C.x, C.y, 6, 0, 2 * Math.PI);
            ctx.fillStyle = '#404040'; // Dark grey fill
            ctx.fill();
            ctx.fillStyle = 'black'; // Reset fillStyle
            ctx.fillText('C', C.x + 10, C.y + 25);
            
            // Draw Panel Label (A., B., etc.)
            ctx.font = '28px serif';
            ctx.fillText(panelLabel, 80, 300);
        }

        // --- Draw the Four Panels ---

        // Panel A
        ctx.save();
        ctx.translate(0, 0);
        drawBaseDiagram("A.");
        const endA = { x: C.x - 70, y: C.y - 100 };
        drawArrow(ctx, C.x, C.y, endA.x, endA.y, 15);
        ctx.font = 'italic 28px serif';
        ctx.fillText('a', endA.x + 18, endA.y);
        ctx.restore();
        
        // Panel B
        ctx.save();
        ctx.translate(425, 0);
        drawBaseDiagram("B.");
        const endB = { x: C.x + 120, y: C.y };
        drawArrow(ctx, C.x, C.y, endB.x, endB.y, 15);
        ctx.font = 'italic 28px serif';
        ctx.fillText('a', endB.x - 30, endB.y - 10);
        ctx.restore();

        // Panel C
        ctx.save();
        ctx.translate(0, 325);
        drawBaseDiagram("C.");
        const endC = { x: C.x, y: C.y + 90 };
        drawArrow(ctx, C.x, C.y, endC.x, endC.y, 15);
        ctx.font = 'italic 28px serif';
        ctx.fillText('a', endC.x + 15, endC.y - 40);
        ctx.restore();
        
        // Panel D
        ctx.save();
        ctx.translate(425, 325);
        drawBaseDiagram("D.");
        const endD = { x: C.x - 35, y: C.y + 60 };
        drawArrow(ctx, C.x, C.y, endD.x, endD.y, 15);
        ctx.font = 'italic 28px serif';
        ctx.fillText('a', endD.x - 35, endD.y - 5);
        ctx.restore();

    </script>
</body>
</html>